<template>
	<view class="ClubAuditItem">
		<image class="clubLogo" :src="props.clubLogo" mode="aspectFill" />
		{{ props.clubId }}
		<view class="clubInf">
			<view class="clubName">俱乐部名称：{{ props.clubName }}</view>
			<view class="clubFounder">建立者：{{ props.founder }}</view>
			<view class="header">负责人：{{ props.head }}</view>
			<view class="headerPhone">负责人电话：{{ props.headPhone }}</view>
			<view class="clubIntro">俱乐部简介：{{ props.clubIntro }}</view>
			<!-- <view class="clubTeacher">指导老师：{{ props.clubTeacher }}</view> -->
		</view>
		<view class="audit" v-if="props.ifAudit">
			<view class="btn access" @tap.stop="accessClub">
				<van-icon name="success" color="#76c84e" />
			</view>
			<view class="btn disagree" @tap.stop="disagreeClub">
				<van-icon name="cross" color="red" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { passClub } from '@/apis/apis'
const props = defineProps({
	clubId: {
		type: Number,
		default: 0,
	},
	ifAudit: {
		type: Boolean,
		default: true,
	},
	clubName: {
		type: String,
		default: '-',
	},
	clubIntro: {
		type: String,
		default: '-',
	},
	// clubTeacher:{
	// 	type:String,
	// 	default:'-'
	// },
	founder: {
		type: String,
		default: '-',
	},
	head: {
		type: String,
		default: '-',
	},
	headPhone: {
		type: String,
		default: '-',
	},
	clubLogo: {
		type: String,
		default: '@/static/imgs/jyuLogo2.png',
	},
	index: {
		type: Number,
		default: 99999,
	}
});
// 通知父组件重新获取数据
const emit = defineEmits(['updateList']);
const accessClub = () => {
	uni.showModal({
		content: `确认 同意 新建 ${props.clubName} 社团吗`,
		success: function (res) {
			if (res.confirm) {
				uni.showLoading({
					title: "加载中",
				});
				passClub({
					clubId: props.clubId,
					statu: 1
				}).then((res) => {
					if (res.status === 200) {
						uni.showToast({
							title: '已通过',
							icon: 'none'
						})
					}
				})
				setTimeout(() => {
					// 调用父组件重新获取
					emit('updateList', props.index);
					uni.hideLoading();
				}, 500);
			} else if (res.cancel) {
				console.log("用户点击取消");
			}
		},
	});
};

const disagreeClub = () => {
	uni.showModal({
		content: `确认 拒绝 新建 ${props.clubName} 社团吗`,
		success: function (res) {
			if (res.confirm) {
				uni.showLoading({
					title: "加载中",
				});
				passClub({
					clubId: props.clubId,
					statu: 2
				}).then((res) => {
					if (res.status === 200) {
						uni.showToast({
							title: '已拒绝',
							icon: 'none'
						})
					}
				})
				setTimeout(() => {
					// 调用父组件重新获取
					emit('updateList', props.index);
					uni.hideLoading();
				}, 500);
			} else if (res.cancel) {
				console.log("用户点击取消");
			}
		},
	});};
</script>

<style lang="less">
.ClubAuditItem {
	padding: 20rpx;
	background-color: white;
	width: 90vw;
	box-sizing: border-box;
	border: 2rpx solid #e6e6e6;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 20rpx;
	margin-bottom: 20rpx;
	position: relative;

	.clubLogo {
		flex: none;
		height: 160rpx;
		width: 160rpx;
		border-radius: 5rpx;
	}

	.clubInf {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		width: 100%;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.audit {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		display: inline-flex;
		gap: 20rpx;
		opacity: 1;

		.btn {
			height: 60rpx;
			width: 60rpx;
			border: 2rpx solid beige;
			border-radius: 100%;
			background-color: aqua;
			display: flex;
			justify-content: center;
			align-items: center;

			&.access {
				border: 1rpx #aedf96 solid;
				background-color: #f0f9eb;
			}

			&.disagree {
				border: 1rpx #fab6b6 solid;
				background-color: #fef0f0;
			}
		}
	}
}
</style>